<template>
  <div style="font-size: 14px">
    <!-- 知识详情弹窗 -->
    <el-drawer v-model="dialogVisible" title="知识详情" direction="rtl" size="900">
      <div v-loading="loading">
        <div class="title">{{ details.title }}</div>
        <div class="sub-title">
          <span>创建者：{{ details.creatorFullName }}</span>
          <span>录入时间：{{ details.addTime }}</span>
          <span>点击：{{ details.clickRate }}</span>
          <span>引用数目：{{ details.count }}</span>
          <span v-if="details.keyWords">关键词：{{ details.keyWords }}</span>
        </div>
        <div class="content" v-html="details.content || '暂无内容'"></div>
        <el-divider content-position="left">相关附件</el-divider>
        <div v-if="details.attachments && details.attachments.length == 0">无</div>
        <div class="file-item" v-for="(item, index) in details.attachments" :key="index">
          <div>
            {{ index + 1 }}、<el-link type="primary">{{ item.attachmentName }}</el-link>
          </div>
          <div class="abstract">文件内容摘要：{{ item.attachmentContent }}</div>
        </div>
        <el-divider content-position="left">评价</el-divider>
        <el-row :gutter="20">
          <el-col :span="7">
            <el-card style="height: 226px">
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  height: 180px;
                  color: #f7ba2a;
                "
              >
                <div style="font-size: 55px">{{ details.pingjiafenshu || 0 }}</div>
                <div style="margin-top: 10px">评价次数: {{ details.cishu || 0 }}</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="17">
            <el-card style="height: 226px" v-loading="formLoading">
              <el-form size="large" label-width="100">
                <el-form-item label="星级评分：">
                  <el-rate v-model="form.stars" />
                </el-form-item>
                <el-form-item label="评价内容：">
                  <el-input v-model="form.remark" placeholder="请输入评价内容" />
                </el-form-item>
                <el-form-item label="">
                  <el-button type="primary" @click="formSubmit">提交</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
        <div>
          <div class="comment-item" v-for="(item, index) in commentList" :key="index">
            <div style="display: flex; align-items: center">
              <span style="margin-right: 15px">{{ item.creator }}</span>
              <el-rate :model-value="parseInt(item.stars)" :disabled="true" size="large" />
              <div style="margin-left: 15px; color: #999999">{{ item.createTime }}</div>
            </div>
            <div>{{ item.remark }}</div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts" name="KnowledgeDetails">
import { ref, reactive, computed, watch } from "vue";
import { showKnowledge, findByIdCommentKnowledge, saveCommentKnowledge } from "@/api/modules/index";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserStore } from "@/stores/modules/user";

interface AttachmentItem {
  attachmentName: string;
  attachmentContent: string;
}

interface Details {
  kid?: number;
  title?: string;
  creatorFullName?: string;
  content?: string;
  addTime?: string;
  clickRate?: number;
  count?: number;
  keyWords?: string;
  pingjiafenshu?: number;
  cishu?: number;
  attachments?: AttachmentItem[];
}

const dialogVisible = ref(false);
const userStore = useUserStore();
const details = ref<Details>({});
const commentList = ref<any>([]);
const loading = ref(false);

// 获取知识详情
const getData = () => {
  showKnowledge({
    kid: details.value.kid
  })
    .then((res: any) => {
      details.value = res;
      loading.value = false;
      // 获取评价
      findByIdCommentKnowledge({
        kid: details.value.kid
      }).then(res => {
        commentList.value = res || [];
      });
    })
    .catch(() => {
      loading.value = false;
    });
};

const form = reactive({
  stars: 0,
  remark: ""
});

const formLoading = ref(false);

const formSubmit = () => {
  if (!form.stars || form.stars < 1) {
    ElMessage.warning("请选择星级");
    return false;
  }
  if (!form.remark) {
    ElMessage.warning("请输入评价内容");
    return false;
  }
  formLoading.value = true;
  saveCommentKnowledge({
    "knowledgeDto.creator": userStore.userInfo.fullName,
    "knowledgeDto.kid": details.value.kid,
    "knowledgeDto.remark": form.remark,
    "knowledgeDto.stars": form.stars,
    score: form.stars
  })
    .then(() => {
      formLoading.value = false;
      ElMessage.success("评价成功");
      form.stars = 0;
      form.remark = "";
      getData(); // 刷新
    })
    .catch(() => {
      formLoading.value = false;
    });
};

const open = item => {
  details.value = item;
  commentList.value = [];
  dialogVisible.value = true;
  loading.value = true;
  // 获取知识详情
  getData();
};

defineExpose({
  open
});
</script>

<style lang="scss" scoped>
.title {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
}
.sub-title {
  display: flex;
  margin-top: 10px;
  color: #888888;
  span {
    margin-right: 15px;
  }
}
.content {
  padding: 15px;
  margin: 15px 0;
  line-height: 1.5;
  text-align: justify;
  white-space: pre-wrap;
  background-color: #f5f5f5;
  border-radius: 5px;

  // 限制图片最大宽度，防止超出drawer
  :deep(img) {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 10px 0;
  }
}
.file-item {
  margin-top: 10px;
}
.abstract {
  padding: 10px;
  margin-top: 5px;
  line-height: 1.5;
  text-align: justify;
  white-space: pre-wrap;
  background-color: #f5f5f5;
  border-radius: 5px;
}
.comment-item {
  padding: 8px 10px 16px;
  border-bottom: 1px solid #e5e5e5;
}
</style>
